<template>
    <div class="login-container">
        <form>
            <div>
                <label>账号：</label>
                <input type="text" v-model="model.username"/>
            </div>
            <div>
                <label>密码：</label>
                <input type="password" v-model="model.password"/>
            </div>
            <div>
                <!-- 编程式跳转 -->
                <button type="button" @click="toLogin">登录</button>
                <!-- 声明式跳转 -->
                <!-- <RouterLink :to="{ name: 'index'}">登录</RouterLink> -->
            </div>
        </form>
    </div>
</template>
<script setup>
import { reactive } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter() // 全局的路由对象
const model = reactive({username: '', password: ''})
const toLogin = () => {
    // 账号是admin，密码是123456
    if(model.username === 'admin' && model.password === '123456') {
        // 存储登录凭证，token
        sessionStorage.setItem('token', 'admin')
        // 跳转
        router.push('/index')
        // router.push({name: 'index'})
        // router.push('/index/' + id)
        // router.push({name: 'index', params: { id: 1 }})
        // router.push({path: '/index', params: { id: 1 }}) // 错误的示例
    } else {
        alert('用户名或密码错误')
    }
}    
</script>
<style scoped>
.login-container {
    width: 100%;
    height: 100vh;
    background-color: honeydew;
    display: flex;
}
form {
    margin: auto;
}    
</style>